﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../../WF/Portal/layui/css/layui.css" rel="stylesheet" />
    <script type="text/javascript" src="../../WF/Scripts/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../WF/Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/config.js" type="text/javascript"></script>
    <script src="../../WF/Comm/Gener.js" type="text/javascript"></script>
    <script src="../layuiadmin/layui/lay/modules/layer.js"></script>
    <script src="../../WF/Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
    <script src="../../WF/Portal/js/vue/vue.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/element/element.js"></script>
    <link rel="stylesheet" href="../../WF/Scripts/element/element.css">

    <style>
        html,body {
         padding:10px;
         height:100%;
         box-sizing:border-box;
        }

        .taskWindows {
            width: 100%;
            height: 100%;
            background: #fff;
            position: fixed;
            top: 0px;
            z-index:9;
        }

        .taskForm {
            width: 80%;
            box-shadow: 0px 0px 8px #eee;
            height: 80%;
            margin: 5% auto;
            padding: 15px;
            border-radius: 5px;
        }
        .pull-right {
            float: right;
        }
        .KnowBoxs, .KnowBoxAdd {
            background: #f7f7f7;
            border-radius: 5px;
            border: 1px solid #e6e6e6;
            height: 120px;
            overflow:hidden;
            box-sizing: border-box;
            cursor: pointer;
            width: 100%;
            position:relative
        }
        .KnowBoxs img{ width:100%;
                       opacity:1
        }
        .KnowBoxs .boxTop {
            position: absolute;
            z-index: 1;
            width: 100%;
            color: #fff;
            padding: 10px 10px 0px;
            box-sizing: border-box;
            background-image: linear-gradient( 180deg,rgba(0,0,0,.5),transparent);
            height:100%;
        }
        .boxTop>.title {
        font-weight:bold;
        
        }
        .KnowBoxAdd {
            text-align: center;
            padding-top: 11%;
            font-size: 20px;
        }
            .KnowBoxAdd:hover {
            background:#e5f3fe;
            color:#5196d8;
            }
            .KnowBoxAdd i {
            font-weight:bold}
            .KnowBoxAdd span {
                display: block;
                font-size: 14px;
            }
            .KnowImg-box img {
                width: 100%;
                border-radius: 5px;
                margin-right: 10px;
            }
        .KnowImg-Bigs {
            width: 120px;
            float: left;
            margin-right: 10px;
        }
        .KnowImg-Small {
            float: left;
        }
            .KnowImg-Small li {
                width: 40px;
                float: left;
                margin-right: 10px;
                cursor:pointer
            }
        .nyellow i {
            color: #ffd800 !important
        }
        .know{ border:1px solid #e6e6e6; background:#fff; padding-bottom:10px; height:100%;}

        .know-tab {
            padding:0px 15px;
            border-bottom: 1px solid #e6e6e6;
        }
        .know-tab span {
            line-height: 40px;
            display:inline-block;
            margin-right:15px;
            padding:0px 10px;
            cursor:pointer
        }
        .tabActive {
            border-bottom: 2px solid #2362fb;
            color: #2362fb;
        }
        .know-box{ padding:0px 10px;}
        .know-box .layui-col-sm2{ min-width:260px;}
        .TaskDepts {
            width: 300px;
            position: absolute;
            z-index: 999;
            background: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        }

            .TaskDepts .TaskDepts-title {
                border-bottom: 1px solid #e6e6e6;
                padding: 10px 15px;
            }

            .TaskDepts .TaskDepts-box {
                padding: 10px 15px;
                height: 248px;
                overflow: auto
            }
        .taskForm > .tf-title {
            padding: 10px 0px;
        }

        .taskForm > .tf-title > .title {
            font-size: 16px;
            font-weight: bold
        }

        .tf-colse {
            cursor: pointer;
            font-size: 16px;
            font-weight: bold
        }

        .tf-colse:hover {
            color: #1E9FFF;
        }

        .Depts li {
            line-height: 26px;
        }

            .Depts li .Depts-Emps {
                padding-left: 20px
            }
        .Empsdata-list {
            display: inline-block;
            background: #cce7fe;
            padding: 2px 5px 4px 15px;
            margin: 9px 5px 0px;
            cursor: pointer
        }

        .Empsdata-list sup {
            opacity: 0;
        }

       .Empsdata-list:hover sup {
            opacity: 1;
            color: #f94e4e;
            
        }
        el-tree-node__expand-icon {
            color: #C0C4CC !important;
            cursor: default;
        }
    </style>
</head>
<body>
    <div class="know" id="know-Default">
        <div class="know-tab" style="margin-bottom:15px;">

            <span @click.stop="Tabnum=1,Refresh()" :class="{tabActive:Tabnum==1}">全部</span>
            <span @click.stop="Tabnum=2,Refresh()" :class="{tabActive:Tabnum==2}">我关注的</span>

        </div>

        <div class="know-box">
            <div v-if="Tabnum==1">
                <div class="layui-row  layui-col-space10">
                    <div class="layui-col-sm2" v-for="(item,index) in knowList">
                        <div class="KnowBoxs" @click.stop="KnowCateShow(item.No)">
                            <div class="boxTop">
                                <div class="pull-right">
                                    <div :class="item.gz ? 'tt nyellow':'tt'" :id="'gz'+item.No">
                                        <i class="layui-icon layui-icon-star-fill" @click.stop="StarType(item.gz,item.No,index)"></i>

                                    </div>
                                </div>

                                <div class="title">{{item.Title}}</div>
                            </div>
                            <div class="imgsrc">
                                <img :src="item.ImgUrl" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm2">
                        <div class="KnowBoxAdd" @click.stop="Addshow=true"><i class="layui-icon layui-icon-addition"></i><span>添加知识点</span></div>
                    </div>
                </div>
            </div>
            <div v-if="Tabnum==2">
                <div class="layui-row  layui-col-space10">
                    <div class="layui-col-sm2" v-for="(item,index) in myknowList">
                        <div class="KnowBoxs" @click.stop="KnowCateShow(item.No)">
                            <div class="boxTop">
                                <div class="pull-right">
                                    <div :class="item.gz ? 'tt nyellow':'tt'" :id="'gz'+item.No">
                                        <i class="layui-icon layui-icon-star-fill" @click.stop="myStarType(item.gz,item.No,index)"></i>

                                    </div>
                                </div>

                                <div class="title">{{item.Title}}</div>
                            </div>
                            <div class="imgsrc">
                                <img :src="item.ImgUrl" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm2">
                        <div class="KnowBoxAdd" @click.stop="Addshow=true"><i class="layui-icon layui-icon-addition"></i><span>添加知识点</span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="taskWindows" v-if="Addshow" @click.stop="Deptshow=false">
            <div class="taskForm">
                <div class="tf-title">
                    <span class="pull-right tf-colse" @click.stop="Addshow=false,Deptshow=false"><i class="layui-icon layui-icon-close"></i></span>
                    <div class="title">新建知识库</div>
                </div>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">知识库名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="TB_Title" id="TB_Title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="height:auto">
                        <label class="layui-form-label">知识库封面</label>
                        <div class="layui-input-block">
                            <div class="KnowImg-box">
                                <div class="KnowImg-Bigs"><img :src="ImgUrl" /></div>
                                <div class="KnowImg-Small">
                                    <ul>
                                        <li v-for="(imgt,im) in KnowImgData">
                                            <img :src="imgt.imgurl" :title="imgt.title" @click.stop="ChooseImg(imgt.imgurl)" />
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <input id="TB_ImgUrl" name="TB_ImgUrl" type="hidden" :value="ImgUrl" />
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">知识库描述</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" name="TB_Docs" id="TB_Docs" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">可见范围</label>
                        <div class="layui-input-block" style="width:300px;">
                            <select name="TB_KnowledgeSta" id="TB_KnowledgeSta" style="display:block" class="layui-input">
                                <option value="2">公开：企业所有成员都可以看见此项目</option>
                                <option value="1">私有：只有加入的成员才能看见此项目</option>

                            </select>

                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">参与人</label>
                            <div class="layui-input-inline" style="width:auto;">
                                <div class="Empsdata-list" v-for="(citem,lk) in EmpsData">
                                    {{citem.name}}
                                    <sup @click.stop="DelEmps(citem.no,citem.name,lk)">X</sup>
                                </div>
                                <div class="Empsdata-list">                                   
                                    <div id="TB_RefEmpsNo" @click.stop="selectRefShow($event)" class="selectRefShow" ref="RefBox">+人员</div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <span type="submit" class="layui-btn layui-btn-normal" @click.stop="SaveKnow()">保存</span>
                            <button @click.stop="Addshow=false" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        
        <div class="TaskDepts" v-if="Deptshow" :style="{'left':DeptshowLeft,'top':Deptshowtop}">
            <div class="TaskDepts-title">人员</div>
            <div class="TaskDepts-box">
                <div class="TaskDepts-input">
                    <el-autocomplete style="width:100%"
                            v-model="empKey"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="请输入内容"
                            @select="handleSelect"
                    >
                    </el-autocomplete>
                </div>
                <div class="Depts">
                    <el-tree
                            :props="props"
                            :load="loadNode"
                            node-key="No"
                            lazy
                            :check-strictly="true"
                            show-checkbox
                            :default-checked-keys="defaultChecks"
                            @check="handleCheck"
                            ref="tree"
                    ></el-tree>

                </div>
            </div>
        </div>
    </div>    
    <script>
        var editPK = '';
        new Vue({
            el: '#know-Default',
            data: {
                list: [],
                ens: [],              
                Addshow: false,               
                Deptshow: false,
                Tabnum:1,
                knowList: [],
                myknowList: [],
                IsStar:0,
                ImgUrl: 'Img/1.png',
                KnowImgData: [{ 'id': 1, 'imgurl': 'Img/1.png' }, { 'id': 2, 'imgurl': 'Img/2.png' }, { 'id': 3, 'imgurl': 'Img/3.png' }, { 'id': 4, 'imgurl': 'Img/4.png' }, { 'id': 5, 'imgurl': 'Img/5.png' }, { 'id': 6, 'imgurl': 'Img/7.png' }, { 'id': 8, 'imgurl': 'Img/8.png' }],
                DeptshowLeft: 0,
                Deptshowtop: 0,
                DeptsData: [],//人员信息
                DeptsDatas: [],
                EmpsData: [],
                EmpsRaw:'',
                webUser:{},
                defaultChecks:[],
                props: {
                    children: "children",
                    label: "Name",
                },
                empKey:"",
            },
            methods: {
                SaveKnow: function () {
                    let Empsstr = ''
                    for (let s = 0; s < this.EmpsData.length; s++) {
                        let de = this.EmpsData[s]
                        Empsstr += de.no+'@'+de.name+';'
                    }
                    let en = new Entity("BP.CCOA.KnowledgeManagement.Knowledge");
                    en.CopyForm();
                    en.Emps = Empsstr;
                    en.Insert();
                    layer.msg('添加成功', { time: 1000 }, function () {
                        location.href = "Knowledge.htm?No=" + en.No;
                        return;
                    })
                },

                ChooseImg: function (imgurl) {
                    this.ImgUrl = imgurl
                },
                KnowCateShow: function (no) {
                    location.href = "Knowledge.htm?no=" + no
                },
                StarType: function (status,no,index) {                  
                    let en = new Entity("BP.CCOA.KnowledgeManagement.Knowledge", no);
                    en.Retrieve();
                    let Foucs=en.Foucs
                    if (status) {
                        Foucs = Foucs.replace(this.webUser.Name + ';', "")
                        $('#gz' + no).removeClass('nyellow')
                        this.knowList[index].gz = 0                      
                    } else {
                        Foucs += this.webUser.Name+';'
                        $('#gz' + no).addClass('nyellow')
                        this.knowList[index].gz = 1                     
                    }
                    en.Foucs = Foucs; // 0=未完成， 1=完成.
                    en.Update();
                },
                myStarType: function (status, no, index) {
                    let en = new Entity("BP.CCOA.KnowledgeManagement.Knowledge", no);
                    en.Retrieve();
                    let Foucs = en.Foucs
                    if (status) {
                        Foucs = Foucs.replace(this.webUser.Name + ';', "")
                        this.myknowList.splice(index, 1)
                    }
                    en.Foucs = Foucs; // 0=未完成， 1=完成.
                    en.Update();
                },
                selectRefShow: function (e) {               
                    this.Deptshow = true;    
                    const $circle = this.$refs.RefBox                   
                    this.DeptshowLeft = this.getParentLeft($circle) + 'px'
                    this.Deptshowtop = this.getParentTop($circle) + 30 + 'px'
                },
                DelEmps: function (no, name) {
                    var _this = this
                    this.EmpsRaw = this.EmpsRaw.replace(name + ';', "")
                    var newArr = new Array();
                    for (var i = 0; i < this.EmpsData.length; i++) {
                        var j = this.EmpsData[i];
                        if (j.no != no) {
                            newArr.push(j);
                        }
                    }
                    console.log(newArr)
                    this.EmpsData = newArr
                },
                /**
                * 获取顶部div的距离
                */
                getParentTop: function (e) {
                    var offset = e.offsetTop
                    if (e.offsetParent != null) {
                        offset += this.getParentTop(e.offsetParent)
                    }
                    return offset
                },
                /**
                 * 获取左侧div的距离
                 */
                getParentLeft(e) {
                    var offset = e.offsetLeft
                    if (e.offsetParent != null) {
                        offset += this.getParentLeft(e.offsetParent)
                    }
                    return offset
                },
                Refresh: function () {
                    var ens = new Entities("BP.CCOA.KnowledgeManagement.Knowledges");
                    ens = ens.DoMethodReturnJSON("Default_Init");
                    var webUser = new WebUser();
                    var Empsstr = webUser.No + '@' + webUser.Name + ';';
                    //权限控制
                    var powerKnow = [];
                    for (var j = 0; j < ens.length; j++){
                        var en = ens[j];
                        var EmpsData = en.Emps;
                        if(en.KnowledgeSta == 2){
                            powerKnow.push(en);
                        }else {
                            if(EmpsData.indexOf(Empsstr) != -1){
                                powerKnow.push(en);
                            }
                        }

                    }
                    //判断是否关注
                    var myknow = []
                    for (i = 0; i < powerKnow.length; i++) {
                        var en = powerKnow[i];
                        var FoucsDate = en.Foucs
                        if (FoucsDate.indexOf(webUser.Name)) {
                            en.gz = 0
                        } else {
                            en.gz = 1
                            myknow.push(en)
                        }

                    }
                    this.knowList = powerKnow;
                    this.myknowList = myknow;
                },
                /**
                 * 人员查询
                 * @param queryString
                 * @param cb
                 */
                querySearchAsync(queryString, cb){
                    if(queryString === ''){
                        cb([]);
                        return;
                    }
                     let ensD = new Entities("BP.CCOA.KnowledgeManagement.Knowledges");
                    let data = ensD.DoMethodReturnString("SelectEmpByKey",queryString);
                    if(data.indexOf("err@")!=-1){
                        layer.alert(data);
                        cb([]);
                        return;
                    }
                    data = JSON.parse(data);
                    data = data.map(item => {
                        if(!!item.NameOfPath)
                            return { No: item.No, Name: item.Name, value: item.NameOfPath.replace(/\\/g, '-') + '-' + item.Name }
                        else
                            return { No: item.No, Name: item.Name, value: item.DeptName + '-' + item.Name }
                    });
                    cb(data);
                },
                /**
                 * 人员自动完成选择人员
                 * @param item
                 */
                handleSelect(item) {
                    if(this.EmpsRaw.indexOf(item.No)==-1){
                        this.EmpsRaw += item.No + ';'
                        this.EmpsData.push({ 'no': item.No, 'name': item.Name });
                        this.defaultChecks.push(item.No);
                    }
                    this.empKey='';
                    const $circle = this.$refs.RefBox
                    this.DeptshowLeft = this.getParentLeft($circle) + 'px'
                    this.Deptshowtop = this.getParentTop($circle) + 30 + 'px'
                },
                //懒加载部门人员树
                loadNode(node, resolve) {
                    let deptNo ="";
                    if (typeof node.data == "undefined") {
                        if (this.webUser.CCBPMRunModel == 0)
                            deptNo = this.webUser.FK_Dept;
                        else
                            deptNo = this.webUser.OrgNo;
                    }
                    else
                        deptNo = node.data.No;
                    if (node.level === 0){
                        let dept = new Entity("BP.Port.Dept",deptNo);
                        return resolve([{
                            No:dept.No,
                            Name:dept.Name,
                            ParentNo:dept.ParentNo,
                            leaf:true,
                            disabled:true
                        }])
                    }
                    let ensD = new Entities("BP.CCOA.KnowledgeManagement.Knowledges");
                    let data = ensD.DoMethodReturnString("Selecter_DeptEmps",deptNo)
                    if (data.indexOf('err@') == 0) {
                        layer.alert(data);
                        return;
                    }

                    data = JSON.parse(data);
                    let treeData=[];
                    data.Depts.forEach(dept=>{
                        treeData.push({
                            No:dept.No,
                            Name:dept.Name,
                            ParentNo:dept.ParentNo,
                            leaf:true,
                            disabled:true
                        })
                    })
                    data.Emps.forEach(emp=>{
                        treeData.push({
                            No:emp.No,
                            Name:emp.Name,
                            leaf:false,
                            disabled:false
                        })
                    })
                    resolve(treeData);
                    return;

                },
                /**
                 * 人员部门树的人员选择
                 * @param data
                 * @param checked
                 */
                handleCheck(data, checked){
                    let checkedKeys = checked.checkedKeys;
                    let arr = checkedKeys.filter(item=>item==data.No);
                    //存在
                    if(arr.length>0){
                        if(this.EmpsRaw.indexOf(data.No)==-1){
                            this.EmpsRaw += data.No + ';'
                            this.EmpsData.push({ 'no': data.No, 'name': data.Name });
                            this.defaultChecks.push(data.No);
                        }
                    }
                    //取消
                    if(arr.length==0){
                        if(this.EmpsRaw.indexOf(data.No)==-1)
                            this.DelEmps(data.No,data.Name);
                        let idx = this.defaultChecks.findIndex(function(no){
                            no = data.No;
                        })
                        if(idx!=-1)
                            this.defaultChecks.slice(idx,1);
                    }
                    const $circle = this.$refs.RefBox
                    this.DeptshowLeft = this.getParentLeft($circle) + 'px'
                    this.Deptshowtop = this.getParentTop($circle) + 30 + 'px'
                },
            },
            mounted: function () {
                this.webUser = new WebUser();
                let ens = new Entities("BP.CCOA.KnowledgeManagement.Knowledges");
                ens = ens.DoMethodReturnJSON("Default_Init");

                let Empsstr = this.webUser.No + '@' + this.webUser.Name + ';';
                //权限控制
                let powerKnow = [];
                for (let j = 0; j < ens.length; j++){
                    let en = ens[j];
                    let EmpsData = en.Emps;
                    if(en.KnowledgeSta == 2){
                        powerKnow.push(en);
                    }else {
                        if(EmpsData.indexOf(Empsstr) != -1){
                            powerKnow.push(en);
                        }
                    }
                }
                //判断是否关注
                let myknow=[]
                for (let i = 0; i < powerKnow.length; i++) {
                    let en = powerKnow[i];
                    let FoucsDate = en.Foucs
                    if (FoucsDate.indexOf(this.webUser.Name)) {
                        en.gz=0
                    } else {
                        en.gz = 1
                        myknow.push(en)
                    }

                }
                this.knowList = powerKnow;
                this.myknowList = myknow;
                this.EmpsRaw = this.webUser.No+';'
                this.EmpsData.push({ 'no': this.webUser.No, 'name': this.webUser.Name });
                this.defaultChecks.push(this.webUser.No);
            }

        });
        
    </script>

</body>
</html>